<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计 - 二手图书交易平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body class="bg-gray-50 p-6">
    <div class="space-y-6">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center">
            <h1 class="text-2xl font-bold text-gray-900">数据统计</h1>
            <div class="flex space-x-4">
                <select class="border rounded-lg px-4 py-2">
                    <option>最近7天</option>
                    <option>最近30天</option>
                    <option>最近90天</option>
                    <option>自定义时间</option>
                </select>
                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                    <i class="fas fa-download mr-2"></i>导出报表
                </button>
            </div>
        </div>

        <!-- 核心指标 -->
        <div class="grid grid-cols-4 gap-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-600">日活用户</p>
                        <p class="text-2xl font-semibold text-gray-900 mt-2">2,847</p>
                    </div>
                    <div class="p-3 bg-blue-100 rounded-lg">
                        <i class="fas fa-users text-blue-600"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-green-600"><i class="fas fa-arrow-up"></i> 12% 较昨日</span>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-600">投诉率</p>
                        <p class="text-2xl font-semibold text-gray-900 mt-2">0.5%</p>
                    </div>
                    <div class="p-3 bg-red-100 rounded-lg">
                        <i class="fas fa-exclamation-circle text-red-600"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-green-600"><i class="fas fa-arrow-down"></i> 0.2% 较上周</span>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-600">审核通过率</p>
                        <p class="text-2xl font-semibold text-gray-900 mt-2">95%</p>
                    </div>
                    <div class="p-3 bg-green-100 rounded-lg">
                        <i class="fas fa-check-circle text-green-600"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-green-600"><i class="fas fa-arrow-up"></i> 2% 较上月</span>
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-sm font-medium text-gray-600">平均结算时效</p>
                        <p class="text-2xl font-semibold text-gray-900 mt-2">2.5h</p>
                    </div>
                    <div class="p-3 bg-purple-100 rounded-lg">
                        <i class="fas fa-clock text-purple-600"></i>
                    </div>
                </div>
                <div class="mt-4">
                    <span class="text-sm text-green-600"><i class="fas fa-arrow-down"></i> 0.5h 较上周</span>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="grid grid-cols-2 gap-6">
            <!-- 交易热力图 -->
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium text-gray-900">交易热力分布</h2>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-sm border rounded-lg hover:bg-gray-50">教学楼</button>
                        <button class="px-3 py-1 text-sm border rounded-lg bg-blue-600 text-white">宿舍区</button>
                    </div>
                </div>
                <div id="heatmap" class="w-full h-80"></div>
            </div>

            <!-- 流转效率分析 -->
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium text-gray-900">图书流转效率</h2>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-sm border rounded-lg bg-blue-600 text-white">交易周期</button>
                        <button class="px-3 py-1 text-sm border rounded-lg hover:bg-gray-50">成交率</button>
                    </div>
                </div>
                <div id="efficiency" class="w-full h-80"></div>
            </div>

            <!-- 用户活跃度分析 -->
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium text-gray-900">用户活跃度分析</h2>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-sm border rounded-lg bg-blue-600 text-white">时段分布</button>
                        <button class="px-3 py-1 text-sm border rounded-lg hover:bg-gray-50">周期规律</button>
                    </div>
                </div>
                <div id="activity" class="w-full h-80"></div>
            </div>

            <!-- 交易趋势分析 -->
            <div class="bg-white p-6 rounded-lg shadow">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-medium text-gray-900">交易趋势分析</h2>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-sm border rounded-lg bg-blue-600 text-white">交易量</button>
                        <button class="px-3 py-1 text-sm border rounded-lg hover:bg-gray-50">交易额</button>
                    </div>
                </div>
                <div id="trend" class="w-full h-80"></div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        const heatmap = echarts.init(document.getElementById('heatmap'));
        const efficiency = echarts.init(document.getElementById('efficiency'));
        const activity = echarts.init(document.getElementById('activity'));
        const trend = echarts.init(document.getElementById('trend'));

        // 热力图配置
        heatmap.setOption({
            tooltip: {},
            visualMap: {
                min: 0,
                max: 100,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
            },
            series: [{
                type: 'heatmap',
                data: [[0, 0, 50], [1, 1, 80], [2, 2, 30]],
                label: {
                    show: true
                }
            }]
        });

        // 流转效率分析配置
        efficiency.setOption({
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['1天内', '1-3天', '3-7天', '7天以上']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934],
                type: 'line',
                smooth: true
            }]
        });

        // 用户活跃度分析配置
        activity.setOption({
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['00:00', '06:00', '12:00', '18:00', '24:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70],
                type: 'bar'
            }]
        });

        // 交易趋势分析配置
        trend.setOption({
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                areaStyle: {}
            }]
        });

        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            heatmap.resize();
            efficiency.resize();
            activity.resize();
            trend.resize();
        });
    </script>
</body>
</html>